<template>
    <div class="user-authorized-template">
        <el-button class="return" type="text" @click="jumpToDefault"><i class="fa fa-angle-left mr5"></i>返回</el-button>
        <h4 class="header">用户授权信息</h4>
        <div class="content">
            <div class="filter-section">
                <span class="fl title">用户授权基本信息</span>
                <span class="fr gray">注：带有*为必填项</span>
            </div>
            <div class="authorized-form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="员工姓名" prop="employeeName">
                        <el-input v-model="ruleForm.employeeName" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员分类" prop="adminCategory">
                        <el-select v-model="ruleForm.adminCategory" placeholder="请选择管理员" size="mini">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职务类别" prop="jobCategory">
                        <el-select v-model="ruleForm.jobCategory" placeholder="请选择职务类别" size="mini">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="entry el-form-item">
                        <span class="key el-form-item__label">部门名称</span>
                        <span class="value el-form-item__content">{{ruleForm.department}}</span>
                    </div>
                    <div class="entry el-form-item">
                        <span class="key el-form-item__label">职位名称</span>
                        <span class="value el-form-item__content">{{ruleForm.jobName}}</span>
                    </div>
                    <el-form-item label="授权状态" prop="authorizedStatus" class="authorized">
                        <el-select v-model="ruleForm.authorizedStatus" placeholder="请选择授权状态" size="mini">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="filter-section">
                <span class="fl title">用户权限设置</span>
            </div>
            <div class="authorized-set">
                <div class="block">
                    <div class="block-title">
                        <span>1、栏目权限</span>
                        <span class="note">注：只要勾选的栏目频道，即表示授权给用户登录后看到栏目频道的权限</span>
                    </div>
                    <div class="block-content">
                        <el-checkbox :indeterminate="column.isIndeterminate" v-model="column.checkAll"
                                     @change="handleCheckAllChange('column',column.checkAll)">全选
                        </el-checkbox>
                        <el-checkbox-group v-model="column.checkedCities"
                                           @change="handleCheckedCitiesChange('column',column.checkedCities)">
                            <el-checkbox v-for="item in column.list" :label="item" :key="item">{{item}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">
                        <span>2、操作功能权限</span>
                        <span class="note">注：只要勾选的功能，即用户操作功能授权</span>
                    </div>
                    <div class="block-content">
                        <el-checkbox :indeterminate="func.isIndeterminate" v-model="func.checkAll"
                                     @change="handleCheckAllChange('func',func.checkAll)">全选
                        </el-checkbox>
                        <el-checkbox-group v-model="func.checkedCities"
                                           @change="handleCheckedCitiesChange('func',func.checkedCities)">
                            <el-checkbox v-for="item in func.list" :label="item" :key="item">{{item}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <div class="btn-wrap">
                <el-button type="primary" @click="submitForm('ruleForm')">确定保存</el-button>
                <el-button @click="cancelForm()">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import AUTHORIZED from "@/consts/authorized.const"

    export default {
        name: "UserAuthorized",
        data() {
            return {
                ruleForm: {
                    username: "",
                    employeeName: "",
                    adminCategory: "",
                    department: "研发部",
                    jobName: "技术经理",
                    jobCategory: "",
                    authorizedStatus: ""
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    adminCategory: [
                        {required: true, message: '请选择管理员', trigger: 'change'},
                    ],
                    authorizedStatus: [
                        {required: true, message: '请选择授权状态', trigger: 'change'},
                    ]
                },
                column: {
                    checkAll: false,
                    checkedCities: [],
                    list: AUTHORIZED.columnOptions,
                    isIndeterminate: false
                },
                func: {
                    checkAll: false,
                    checkedCities: [],
                    list: AUTHORIZED.funcOptions,
                    isIndeterminate: false
                }
            }
        },
        methods: {
            handleCheckAllChange(type, value) {
                this[type].checkedCities = value ? AUTHORIZED[`${type}Options`] : [];
                this[type].isIndeterminate = false;
            },
            handleCheckedCitiesChange(type, value) {
                let checkedCount = value.length;
                this[type].checkAll = checkedCount === this[type].list.length;
                this[type].isIndeterminate = checkedCount > 0 && checkedCount < this[type].list.length;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('submit!');
                        this.jumpToDefault();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            cancelForm() {
                this.jumpToDefault();
            },
            jumpToDefault() {
                this.$parent.curPath = 'default';
            }
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .user-authorized-template {
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        position: relative;
        .return {
            position: absolute;
            top: 0;
            left: 15px;
            padding: 0;
        }
        .header {
            text-align: center;
        }
        .content {
            height: 100%;
            .filter-section {
                border-bottom: 1px solid #ddd;
                padding-bottom: 25px;
                margin: 0 10px;
                padding-left: 5px;
                padding-right: 5px;
                .title {
                    font-size: $font-mn;
                    font-weight: 600;
                }
                .gray {
                    color: gray;
                }
            }
            .authorized-form {
                height: 40%;
                padding-top: 10px;
                .el-form {
                    height: calc(100% - 120px);
                    @include ofy-a();
                    margin: 0 50px;
                    .el-form-item {
                        margin-bottom: 15px;
                        display: inline-block;
                        width: 50%;
                        .el-form-item__content {
                            @include fl();
                            margin-left: 0 !important;
                        }
                        .el-input {
                            width: 300px;
                        }
                    }
                    .entry {
                        .key {
                            width: 100px;
                        }
                    }
                    .authorized {
                        @include fl();
                    }
                }
            }
            .authorized-set {
                margin: 20px 50px;
                .block {
                    &:first-child {
                        margin-bottom: 20px;
                    }
                    .block-title {
                        text-align: start;
                        font-size: $font-mn;
                        color: #dddddd;
                        &:first-child {
                            color: #cccccc;
                        }
                        .note {
                            margin-left: 100px;
                        }
                    }
                    .block-content {
                        margin-top: 5px;
                        border: 1px dashed #dddddd;
                        text-align: start;
                        .el-checkbox {
                            margin-bottom: 10px;
                        }
                        .el-checkbox-group {
                            padding-left: 25px;
                            .el-checkbox {
                                margin-right: 0;
                                width: 120px;
                            }
                        }
                    }
                }
            }
            .btn-wrap {
                .el-button {
                    width: 100px;
                    margin: 0 50px;
                }
            }
        }
    }
</style>